<template>
	<view class="net">
		<view class="card1" v-if="false">
			<image src="/static/1.jpg" mode="aspectFill" class="banner"></image>
			<view class="h1">自动复制最成功的交易者信号</view>
			<view class="p">开始链接交易平台API</view>
			<button class="btn1 flex-center">连接为跟随者</button>
			<button class="btn2 flex-center">交易员入驻</button>
			<view class="h4">开放的互联社区，支持全球多家交易所</view>
		</view>
		<view class="card2" v-else>
			<view class="top flex-between">
				<view class="left">
					<view class="flex name">
						<text>HuoBi</text>
						<view class="status flex-center">账户审核中</view>
					</view>
					<text class="p">交易员账户</text>
				</view>
				<image src="/static/1.jpg" mode="widthFix" class="right"></image>
			</view>
			<view class="middle flex-between">
				<view>
					<view class="h3">0</view>
					<text>跟随人数</text>
				</view>
				<view>
					<view class="h3">0</view>
					<text>跟随佣金</text>
				</view>
			</view>
			<button class="flex-center" @click="goPage('/pages/signal/index')">去跟随</button>
		</view>
		<!-- 筛选弹窗 -->
		<view class="popup flex" v-if="showPopup" @click="closePopup">
			<view class="box" @click.stop>
				<view class="top flex-center-column">
					<view>添加API账户</view>
					<text>请选择以下账户类型连接API</text>
				</view>
				<view class="flex-between btns">
					<navigator url="/pages/net/plat?type=1" hover-class="none" class="reset btn flex-center">成为交易员</navigator>
					<navigator url="/pages/net/plat?type=2" hover-class="none" class="confirm btn flex-center">我要跟随</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPopup:false
			}
		},
		methods: {
			goPage(url){	
				uni.switchTab({
					url
				})
			},
			closePopup(){
				this.showPopup = false;
				uni.showTabBar()
			}
		},
		onNavigationBarButtonTap() {
			this.showPopup = true;
			uni.hideTabBar()
		},
		onHide() {
			this.closePopup()
		}
	}
</script>

<style lang="less">
	page{
		background: white;
	}
	@color:#d4237a;
	.net{
		padding: 30rpx 30rpx;
		.card1{
			.banner{
				width: 100%;
				height: 400rpx;
			}
			.h1{
				font-size: 60rpx;
				padding: 0 45rpx;
			}
			.p{
				font-size: 28rpx;
				color:#666;
				margin: 20rpx 0 80rpx;
				padding: 0 45rpx;
			}
			.btn1{
				font-size: 26rpx;
				background: #000;
				color:#fff;
				height: 80rpx;
				border-radius: 40rpx;
				font-weight: bold;
				margin: 0 45rpx;
			}
			.btn2{
				font-size: 26rpx;
				height: 80rpx;
				border-radius: 40rpx;
				font-weight: bold;
				border: 1px solid rgba(0,0,0,.2);
				margin: 20rpx 45rpx 24rpx;
			}
			.h4{
				font-size: 24rpx;
				margin: 0 45rpx;
			}
		}
		.card2{
			padding: 30rpx;
			border-radius: 10rpx;
			background:#042a63;
			color:#fff;
			min-height: 340rpx;
			.top{
				.name{
					text{
						font-size: 50rpx;
					}
					.status{
						height: 50rpx;
						background: rgba(255,255,255,.3);
						border-radius: 30rpx;
						font-size: 20rpx;
						margin-left: 20rpx;
						padding: 0 25rpx;
					}
				}
				.p{
					font-size: 20rpx;
				}
				.right{
					width: 50rpx;
					height: 80rpx;
				}
			}
			.middle{
				padding: 30rpx 0;
				&>view{
					width: 47%;
					font-size: 34rpx;
					text{
						font-size: 20rpx;
						opacity: .3;
					}
				}
			}
			button{
				font-size: 32rpx;
				height: 70rpx;
				border-radius: 40rpx;
				margin:15rpx 0 40rpx;
			}
		}
		.popup {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, .5);
			z-index: 10;
			align-items: flex-end;
		
			.box {
				width: 100vw;
				background: white;
				border-radius: 20rpx 20rpx 0 0;
				padding: 30rpx 20rpx 80rpx;
		
				.top {
					margin-bottom: 15rpx;
		
					view {
						font-size: 34rpx;
						font-weight: bold;
					}
					text{
						margin: 20rpx 0 50rpx;
						font-size: 24rpx;
						color:#999;
					}
				}
		
				
		
				.btns {
					margin-top: 30rpx;
		
					.btn {
						width: 48%;
						height: 80rpx;
						border-radius: 40rpx;
						background: #eee;
						font-size: 30rpx;
						font-weight: bold;
		
						&.confirm {
							background: @color;
							color: #fff;
						}
					}
				}
			}
		}
	}
</style>
